<template>
  <div v-loading="loading" class="container" element-loading-text="加载中...">
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button size="mini" type="primary" @click="Addrole">添加角色</el-button>
        <el-dropdown trigger="click" style="margin-left: 20px;" @command="handleCommand">
          <span class="el-dropdown-link">
            已启用<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in enableList" :key="item.id" :command="item.id">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 放置table组件 -->
      <el-table :data="list">
        <!-- 放置列 -->
        <!-- 角色 -->
        <el-table-column align="center" width="200" label="角色" prop="name">
          <template #default="{ row }">
            <el-input v-if="row.isEdit" v-model="row.tempEdit.name" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <!-- 启用 -->
        <el-table-column align="center" width="200" label="启用">
          <template #default="{ row }">
            <el-switch v-if="row.isEdit" :value="IsEnable(row.tempEdit)" size="mini" @change="(value)=>changeSwitch(value,row.tempEdit)" />
            <span v-else>{{ row.state === 1 ? '已启用' : row.state === 0 ? '未启用' : '无' }}</span>
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column align="center" label="描述" prop="description">
          <template #default="{ row }">
            <el-input v-if="row.isEdit" v-model="row.tempEdit.description" type="textarea" size="mini" :rows="3" />
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <template v-if="row.isEdit">
              <el-button type="primary" size="mini" @click="confirm(row)">确定</el-button>
              <el-button size="mini" @click="row.isEdit = false">取消</el-button>
            </template>
            <template v-else>
              <el-button size="mini" type="text" @click="roleDetail(row)">查看详情</el-button>
              <el-button size="mini" type="text" @click="$router.replace(`/role/assign/${row.id}`)">分配权限</el-button>
              <el-button size="mini" type="text" @click="Edit(row)">编辑</el-button>
              <el-popconfirm title="您确定要删除这个角色吗？" @onConfirm="confirmDel(row.id)">
                <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" style="height:60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <el-pagination
          :page-size="params.pagesize"
          :current-page="params.page"
          :total="params.total"
          layout="prev, pager, next"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <!-- 添加角色 -->
    <Dialog ref="dialog" @Refresh="Refresh" />
    <!-- 角色详情 -->
    <dialogDetail ref="dialogDetail" />
  </div>
</template>

<script>
import Dialog from './components/Dialog.vue'
import dialogDetail from './components/dialogDetail.vue'
import { getRoleList, updateRole, delRole, getEnableList } from '@/api/role.js'
export default {
  name: 'Role',
  components: {
    Dialog,
    dialogDetail
  },
  data() {
    return {
      enableList: [], // 已启用
      loading: false,
      // 与后端相互（筛选的数据）
      params: {
        page: 1, // 当前页码数
        pagesize: 10, // 当前页面需要的数据条数
        total: null // 数据总条数
      },
      list: [] // 数据列表
    }
  },
  created() {
    this.GetRoleList()
    this.GetEnableList()
  },
  methods: {
    // 编辑状态下 回显 是否被启用
    IsEnable(row) {
      return row.state === 1
    },
    // 初始化函数
    async GetRoleList() {
      this.loading = true
      const { rows, total } = await getRoleList(this.params)
      this.list = rows // 赋值数据
      // this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式
      this.list.forEach(item => {
        // 动态添加的属性不具备响应式的特点
        this.$set(item, 'isEdit', false) // 针对每一行数据添加一个编辑标记 响应式
        this.$set(item, 'tempEdit', {
          name: item.name,
          state: item.state,
          description: item.description
        })// 针对当前的数据做了一份拷贝，针对这个拷贝，我们可以随意修改 响应式
      })
      this.params.total = total // 总条数
      this.loading = false
    },
    // 获取启用的角色列表
    async GetEnableList() {
      const res = await getEnableList()
      this.enableList = res
    },
    // 当分页组件页面被点击时触发
    changePage(newPage) {
      this.params.page = newPage // 跳到选择的页码数对应的数据
      this.GetRoleList()
    },
    // 增加角色
    Addrole() {
      this.$refs.dialog.showDialog = true
    },
    // 接收子组件更新页面消息
    Refresh() {
      this.$message.success({ message: '添加角色成功', duration: 1500 })
      this.params.page = Math.ceil((this.params.total + 1) / 8) // 移到最后一页
      this.GetRoleList()
    },
    // 点击编辑
    Edit(row) {
      // row拿到每一行的元素
      row.isEdit = true
      // 可能用户在编辑时候 不想修改了 点击了取消 则回显
      row.tempEdit.name = row.name
      row.tempEdit.state = row.state
      row.tempEdit.description = row.description
    },
    // 当是否启用 按键被修改的时候触发
    changeSwitch(value, row) {
      row.state = value ? 1 : 0
    },
    // 确定修改角色
    async confirm(row) {
      await updateRole(row.id, row.tempEdit)
      this.$message.success({ message: '修改角色成功', duration: 1500 })
      this.GetRoleList() // 当前页面刷新
    },
    // 确定删除角色
    async confirmDel(id) {
      await delRole(id)
      if (this.list.length === 1 && this.params.page > 1) this.params.page-- // 如果当前页面只有一条数据的时候在显示前一面的内容
      this.$message.success({ message: '删除角色成功', duration: 1500 })
      this.GetRoleList() // 当前页面刷新
    },
    // 查看角色详情
    async roleDetail(row) {
      this.$refs.dialogDetail.showDialog = true
      this.$refs.dialogDetail.GetRoleDetail(row.id)
    },
    // 下拉菜单点击子元素 展示角色详情
    handleCommand(id) {
      console.log(id)
      this.$refs.dialogDetail.showDialog = true
      this.$refs.dialogDetail.GetRoleDetail(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
